<template>
  <div class="agent_base">
    <div class="head_title" v-if="parseInt(type) != 1">基本信息</div>
    <div class="unit_text">
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>代理商名称:
        </div>
        <div class="right" v-if="type == 0">{{detail.agent_name}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.agent_name"
            clearable
            placeholder="请输入代理商名称"
            ref="agent_name"
          ></el-input>
        </div>
      </div>
      <div class="unit" v-if="detail.type==2">
        <div class="left">
          <span v-show="type > 0"></span>统一信用代码:
        </div>
        <div class="right" v-if="type == 0">{{detail.enterprise_code}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.enterprise_code"
            clearable
            placeholder="请输入统一信用代码"
            ref="enterprise_code"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>法人姓名:
        </div>
        <div class="right" v-if="type == 0">{{detail.legal_person}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.legal_person"
            clearable
            placeholder="请输入法人姓名"
            ref="legal_person"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>证件号码:
        </div>
        <div class="right" v-if="type == 0">{{detail.certificate}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.certificate"
            clearable
            placeholder="请输入证件号码"
            ref="certificate"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>联系人姓名:
        </div>
        <div class="right" v-if="type == 0">{{detail.contact_name}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.contact_name"
            clearable
            placeholder="请输入联系人姓名"
            ref="contact_name"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>联系人手机:
        </div>
        <div class="right" v-if="type == 0">{{detail.contact_mobile}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.contact_mobile"
            clearable
            placeholder="请输入联系人手机"
            ref="contact_mobile"
          ></el-input>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>代理商类型:
        </div>
        <div class="right" v-if="type == 0">{{detail.type_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.type" ref="type">
            <el-option
              v-for="item in agent_type_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>所属地区:
        </div>
        <div class="right" v-if="type == 0">{{detail.belong_address}}</div>
        <div class="right" v-else>
          <el-select
            name="provice"
            class="selectClass"
            @change="changeRegion($event, 'provice')"
            v-model="detail.province"
            placeholder="省"
            ref="province"
          >
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in province_list"
              :key="index"
              :selected="item.region_id == detail.province"
            >{{item.name}}</el-option>
          </el-select>
          <el-select
            name="city"
            class="selectClass"
            @change="changeRegion($event, 'city')"
            v-model="detail.city"
            placeholder="市"
            ref="city"
          >
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in city_list"
              :key="index"
              :selected="item.region_id == detail.city"
            >{{item.name}}</el-option>
          </el-select>
          <el-select
            name="district"
            class="selectClass"
            v-model="detail.district"
            placeholder="区/县"
            ref="district"
          >
            <el-option
              :value="item.region_id"
              :label="item.name"
              v-for="(item, index) in district_list"
              :key="index"
              :selected="item.region_id == detail.district"
            >{{item.name}}</el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>所属客户经理:
        </div>
        <div class="right" v-if="type == 0">{{detail.lead_client_manager}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.client_manager_id">
            <el-option
              v-for="item in client_manager_list"
              :key="item.client_manager_id"
              :label="item.user_name"
              :value="item.client_manager_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>协议附件:
        </div>
        <div class="right" v-if="type == 0">
          <el-link
            type="primary"
            :href="detail.protocol_attach"
            target="_blank"
            v-if="detail.protocol_attach != ''"
          >下载协议</el-link>
        </div>
        <div class="right" v-else>
          <el-upload
            class="flex"
            :action="upload_file"
            :on-preview="uploadProtocolPreview"
            :on-change="uploadProtocolChange"
            :on-success="uploadProtocolSuccess"
            :on-remove="removeProtocol"
            :file-list="detail.protocol"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>
      <div class="unit">
        <div class="left">上级代理商:</div>
        <div class="right" v-if="type == 0">{{detail.lead_agent_name}}</div>
        <div class="right" v-else>
          <el-select v-model="detail.lead_agent_id">
            <el-option
              v-for="item in belong_agent_list"
              :key="item.agent_id"
              :label="item.agent_name"
              :value="item.agent_id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>协议时间:
        </div>
        <div
          class="right"
          v-if="type == 0"
        >{{detail.protocol_time_start}} - {{detail.protocol_time_end}}</div>
        <div class="right" v-else>
          <el-date-picker
            v-model="detail.protocol_time"
            value-format="timestamp"
            :default-time="['0:00:00','23:59:59']"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </div>
      </div>
      <div class="unit">
        <div class="left">
          <span v-show="type > 0"></span>联系地址:
        </div>
        <div class="right" v-if="type == 0">{{detail.address}}</div>
        <div class="right" v-else>
          <el-input
            type="text"
            v-model="detail.address"
            clearable
            placeholder="请输入联系地址"
            ref="address"
          ></el-input>
        </div>
      </div>
      <div class="unit" v-if="type == 1">
        <div class="left">
          <span v-show="type > 0"></span>初始管理员账户:
        </div>
        <div class="right">
          <el-input
            type="text"
            v-model="detail.agent_user_name"
            clearable
            placeholder="请输入初始管理员账户"
            ref="agent_user_name"
          ></el-input>
        </div>
      </div>
    </div>
    <div style="clear: both"></div>
    <div class="unit_img_block">
      <div class="unit_img" v-if="detail.type==2">
        <div class="left">
          <span v-show="type > 0"></span>营业执照:
        </div>
        <div class="right" v-if="type == 0">
          <el-image
            style="width: 280px;height: 150px;"
            :src="business_licence_img"
            :preview-src-list="[business_licence_img]"
          ></el-image>
        </div>
        <div class="right" v-else>
          <el-upload
            class="upload"
            drag
            :action="upload_file"
            :show-file-list="false"
            :on-success="businessSuccess"
          >
            <!-- 如果是编辑的话，这里先展示图片 -->
            <img
              v-if="type == 2 || (type == 1 && flag_business)"
              style="width:100%;height:100%"
              :src="business_licence_img"
              alt
            />
            <!-- 如果是新增的话，这里显示上传图片按钮 -->
            <i v-if="type == 1 && !flag_business" class="el-icon-upload"></i>
            <div v-if="type == 1 && !flag_business" class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="unit_img">
        <div class="left">
          <span v-show="type > 0"></span>身份证:
        </div>
        <div class="right" v-if="type == 0">
          <el-image
            style="width: 280px;height: 150px;"
            :src="certificate_img"
            :preview-src-list="[certificate_img]"
          ></el-image>
        </div>
        <div class="right" v-else>
          <el-upload
            class="upload"
            drag
            :action="upload_file"
            :show-file-list="false"
            :on-success="certificateSuccess"
          >
            <!-- 如果是编辑的话，这里先展示图片 -->
            <img
              v-if="type == 2 || (type == 1 && flag_cert)"
              style="width:100%;height:100%"
              :src="certificate_img"
              alt
            />
            <!-- 如果是新增的话，这里显示上传图片按钮 -->
            <i v-if="type == 1 && !flag_cert" class="el-icon-upload"></i>
            <div v-if="type == 1 && !flag_cert" class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </div>
      </div>
    </div>

    <!-- 新增、编辑的时候还有下面的按钮，用于提交数据 -->
    <!-- 新增 -->
    <el-row style="margin-left:30px;padding-bottom:20px;">
      <el-button type="primary" @click="submitInfo" v-if="type == 1">下一步</el-button>
      <!-- 编辑 -->
      <el-button type="primary" @click="submitInfo" v-if="type == 2">保存</el-button>
    </el-row>

    <modelBox
      :show="protocolFileShow"
      @show_box="showModelProtocolFile"
      v-if="detail.protocol.length > 0"
    >
      <div class="flex center" style="height:100%">
        <div class="protocol_img">
          <img :src="detail.protocol[0].img" />
        </div>
      </div>
    </modelBox>
  </div>
</template>





<script>
export default {
  name: "AgentBase",
  props: {
    type: 0 // 0:查看、1：新增、2：编辑
  },
  data() {
    return {
      agent_id: 0, //代理商ID
      flag_business: false, //营业执照图片是否显示
      flag_cert: false, //身份证照片是否显示
      protocolFileShow: false, //展示预览图片
      agent_type_list: [
        { value: 1, label: "个人" },
        { value: 2, label: "企业" }
      ], //企业类型 1：个人、2：企业
      client_manager_list: [], //客户经理列表
      belong_agent_list: [], //上级代理商列表
      province_list: [], //省列表
      city_list: [], //省列表
      district_list: [], //省列表
      detail: {
        type: "", //代理商类型，1：个人、2：企业
        agent_user_name: "", //代理商初始管理员
        agent_name: "", //代理商名称
        enterprise_code: "", //统一信用代码
        legal_person: "", //法人姓名
        certificate: "", //证件号码
        contact_name: "", //联系人姓名
        contact_mobile: "", //联系人手机号码
        type_name: "", //代理商类型
        belong_address: "", //所属地区
        lead_agent_id: "", //所属代理商ID
        client_manager_id: "", //所属客户经理id
        lead_client_manager: "", //所属客户经理
        lead_agent_name: "", //所属代理商
        address: "", //企业联系地址
        protocol_time_start: "", //协议开始时间
        protocol_time_end: "", //协议结束时间
        protocol_time: [], //协议时间范围
        protocol_attach: "", //协议附件
        business_licence_img: "", //营业执照
        certificate_img: "", //身份证照片
        province: "", //省ID
        city: "", //市ID
        district: "", //区ID
        protocol: [] //协议下载地址
      },
      current_path: "" // 当前路由
    };
  },
  computed: {
    upload_file() {
      //上传图片路径
      return this.$store.getters.uploadFile;
    },
    business_licence_img() {
      return this.detail.business_licence_img
        ? this.detail.business_licence_img
        : this.$store.getters.defaultImg;
    },
    certificate_img() {
      return this.detail.certificate_img
        ? this.detail.certificate_img
        : this.$store.getters.defaultImg;
    },
    post_data() {
      let data = this.detail;
      if (this.agent_id) data.agent_id = this.agent_id;
      if (data.protocol_time && data.protocol_time.length > 0) {
        data.protocol_time_start = data.protocol_time[0] / 1000; //协议开始时间
        data.protocol_time_end = data.protocol_time[1] / 1000; //协议结束时间
      }
      return data;
    },
    getNavList() {
      return this.$store.getters.getNavList;
    }
  },
  mounted() {
    if (parseInt(this.$route.query.agent_id) > 0)
      this.agent_id = this.$route.query.agent_id;
    this.getAgentList();
    this.getClientList();
    this.getRegionList();
    if (this.type == 0 || this.type == 2) this.getBaseInfo();
    this.current_path = this.$route.path;
  },
  methods: {
    async getBaseInfo() {
      //基本信息
      let { code, msg, data } = await this.$api.sendSync(
        this.$mapapi.f_getAgentDetail,
        { agent_id: this.agent_id }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.detail = data.detail;
      //将 detail.protocol 写入原来的协议信息
      if (data.detail.protocol_attach != "") {
        this.detail.protocol = [
          {
            uid: 0,
            img: data.detail.protocol_attach,
            name: '协议附件'
          }
        ];
      } else {
        this.detail.protocol = [];
      }

      this.detail.protocol_time_start = data.detail.protocol_time[0];
      this.detail.protocol_time_end = data.detail.protocol_time[1];

      await this.getRegionList();
    },
    async getRegionList() {
      //获取省、市、区县 地区列表数据
      console.log("come here");
      let { code, msg, data } = await this.$api.sendSync(
        this.$mapapi.get_region,
        { parent_id: 0 }
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.province_list = data;
      if (parseInt(this.detail.province) > 0) {
        let res_city = await this.$api.sendSync(this.$mapapi.get_region, {
          parent_id: this.detail.province
        });
        if (res_city.code != 200) {
          this.$message.error(res_city.msg);
          return;
        }
        this.city_list = res_city.data;
        let res_district = await this.$api.sendSync(this.$mapapi.get_region, {
          parent_id: this.detail.city
        });
        this.district_list = res_district.data;
      }
    },
    changeRegion(e, do_name) {
      //选择地区
      let parent_id = e;
      //获取对应下级的地区地址
      let { code, msg, data } = this.$api.sendSync(this.$mapapi.get_region, {
        parent_id
      });
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      if (do_name == "provice") {
        this.detail.city = "";
        this.city_list = data;
      } else {
        this.detail.district = "";
        this.district_list = data;
      }
    },
    uploadProtocolPreview() {
      //点击预览图片
      this.protocolFileShow = true;
    },
    uploadProtocolChange(file, fileList) {
      if (this.detail.protocol.length > 1) {
        this.detail.protocol.shift();
        fileList.shift();
      }
    },
    uploadProtocolSuccess(res) {
      //图片上传成功之后
      this.detail.protocol.push({
        uid: Date.now(),
        img: res.data.url,
        name: res.data.name
      });
      this.detail.protocol_attach = res.data.url;
    },
    removeProtocol() {
      //移除协议文件列表中的文件时
      this.detail.protocol.pop();
      this.detail.protocol_attach = "";
    },
    getAgentList() {
      //获取简易代理商列表
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_simpleAgentList,
        {}
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.belong_agent_list = data;
    },
    getClientList() {
      //获取简易客户经理列表
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_simpleClientManagerList,
        {}
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.client_manager_list = data;
    },
    showModelProtocolFile() {
      this.protocolFileShow = false;
    },
    businessSuccess(response) {
      //营业执照上传成功
      if (response.code != 200 && response.code != 501) {
        this.$message.error(response.msg);
        return;
      }
      this.flag_business = true;
      this.detail.business_licence_img = response.data.url;
    },
    certificateSuccess(response) {
      //身份证上传成功
      if (response.code != 200 && response.code != 501) {
        this.$message.error(response.msg);
        return;
      }
      this.flag_cert = true;
      this.detail.certificate_img = response.data.url;
    },

    submitInfo() {
      //提交信息
      //先校验必传数据
      let post_data = this.post_data;
      console.log("post_data", post_data);
      delete post_data.type_name,
        delete post_data.belong_address,
        delete post_data.lead_client_manager,
        delete post_data.lead_agent_name;
      if (this.type == 2) delete post_data.agent_user_name;
      console.log("realy_post_data", post_data);
      for (let i in post_data) {
        if (post_data[i] == "" && i != "lead_agent_id") {
          this.$message.error("请填写完必填项");
          if (this.$refs[i] !== undefined) this.$refs[i].focus();
          return;
        }
      }
      let { code, msg, data } = this.$api.sendSync(
        this.$mapapi.f_saveAgent,
        post_data
      );
      if (code != 200 && code != 501) {
        this.$message.error(msg);
        return;
      }
      this.$message.success(msg);
      console.log("type", this.type);
      if (this.type == 1) {
        //如果是新增的话，这里回传 agent_id 好进入下一步
        this.$emit("submitInfo", data.agent_id);
      } else {
        this.$blackRoute({
          path: "/facilitator_agent_managen",
          query: {},
          that: this
        }); // 返回指定路由-删除标题栏
      }
    }
  },
  activated() {
    let flag = false;
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      if (parseInt(this.$route.query.agent_id) > 0)
        this.agent_id = this.$route.query.agent_id;
      if (this.type == 0 || this.type == 2) this.getBaseInfo();
      this.$setRouteTitle();
    }
  },
  deactivated() {
    let flag = false; //是否保留数据
    for (let val of this.getNavList) {
      if (val.path == this.current_path) {
        flag = true;
      }
    }
    if (!flag) {
      this.detail = {
        type: "", //代理商类型，1：个人、2：企业
        agent_user_name: "", //代理商初始管理员
        agent_name: "", //代理商名称
        enterprise_code: "", //统一信用代码
        legal_person: "", //法人姓名
        certificate: "", //证件号码
        contact_name: "", //联系人姓名
        contact_mobile: "", //联系人手机号码
        type_name: "", //代理商类型
        belong_address: "", //所属地区
        lead_agent_id: "", //所属代理商ID
        client_manager_id: "", //所属客户经理id
        lead_client_manager: "", //所属客户经理
        lead_agent_name: "", //所属代理商
        address: "", //企业联系地址
        protocol_time_start: "", //协议开始时间
        protocol_time_end: "", //协议结束时间
        protocol_time: [], //协议时间范围
        protocol_attach: "", //协议附件
        business_licence_img: "", //营业执照
        certificate_img: "", //身份证照片
        province: "", //省ID
        city: "", //市ID
        district: "", //区ID
        protocol: [] //协议下载地址
      };
    }
  }
};
</script>
<style lang="less" :scope="true">
.agent_base {
  margin: 10px;
  padding: 0;
  background: #fff;
  font-size: 14px;
  text-indent: 0;
  .protocol_img {
    margin: auto;
  }

  .head_title {
    width: 70px;
    text-align: right;
    border-left: 2px solid #4280f2;
  }
  .unit_text {
    width: 100%;
    .unit {
      width: 48%;
      margin: 5px 0 10px 2%;
      float: left;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
      .left {
        width: 25%;
        float: left;

        span::before {
          content: "*";
          color: red;
        }
      }
      .right {
        width: 65%;
        margin-left: 20px;
        float: left;

        .selectClass {
          width: 30%;
          margin-right: 10px;
        }
      }
    }
  }
  .unit_img_block {
    width: 100%;
    margin-top: 2%;
    height: 200px;
    .unit_img {
      width: 48%;
      margin-left: 2%;
      float: left;
      font-weight: 700;
      .left {
        width: 25%;
        float: left;

        span::before {
          content: "*";
          color: red;
        }
      }
      .right {
        width: 65%;
        margin-left: 20px;
        float: left;
      }
    }
  }
}
</style>